import classNames from "classnames";
import contentStyle from "../index.module.scss";
import Drag from "./dragabelLayout";
import styles from "./index.module.scss";
import ColumnWidth from "./columnWidth";
import Title from "./module/title";
import Spacing from "./module/spacing";
import { updateCustomization } from "@/service";

const requests = new Map();
let timer = null;
export async function batchUpdateCustomization(data) {
  requests.set("id", data.id);
  data.updates.forEach((item) => {
    requests.set(item.path, item);
  });
  return new Promise<any>((resolve) => {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(async () => {
      const obj = {
        id: requests.get("id"),
        updates: [],
      };

      requests.forEach((value, key, map) => {
        if (key !== "id") {
          obj.updates.push(value);
        }
      });

      requests.clear();
      const res = await updateCustomization({
        ...obj,
      });
      resolve(res);
      timer = null;
    }, 1300);
  });
}

function Index() {
  return (
    <div
      className={classNames(styles.layout, styles.module, contentStyle.card)}
    >
      <h1 className={contentStyle.title} style={{ marginBottom: "20px" }}>
        模块布局
      </h1>
      <div style={{ maxWidth: "500px" }}>
        <Drag></Drag>
        <ColumnWidth />
        <Title></Title>
        <Spacing></Spacing>
      </div>
    </div>
  );
}

export default Index;
